<script setup lang="ts">
import {useUserStore} from "../store/user.ts";
import { useCartStore } from "../store/cartStore.ts";
import {Lock, UserFilled} from "@element-plus/icons-vue";
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import * as UserApi from '../apis/user.ts'

const userStore = useUserStore();
const cartStore = useCartStore();

const signForm = reactive({
  username: '',
  password: '',
  confirmPassword: ''
})

const registerModel = ref(false);
const loading = ref(false);
const loginLoading = ref(false);
const handleModelSwitch = () => {
  loading.value = true;
  cleanForm();
  setTimeout(() => {
    registerModel.value = !registerModel.value;
    loading.value = false;
  }, 300)
}

const cleanForm = () => {
  signForm.username = '';
  signForm.password = '';
  signForm.confirmPassword = '';
  registerModel.value = false;
}

const verifyForm = () => {
  if (signForm.username == null || signForm.username == '') {
    ElMessage({
      message: '用户名不能为空',
      type: 'warning'
    })
    return false;
  }

  if (signForm.password == null || signForm.password == '') {
    ElMessage({
      message: '密码不能为空',
      type: 'warning'
    })
    return false;
  }
  if (registerModel.value && (signForm.confirmPassword == null || signForm.confirmPassword == '')) {
    ElMessage({
      message: '确认密码不能为空',
      type: 'warning'
    })
    return false;
  }

  if (registerModel.value && signForm.password != signForm.confirmPassword) {
    ElMessage({
      message: '两次密码不一致',
      type: 'warning'
    })
    return false;
  }

  return true;
}

const handleLogin = () => {
  loginLoading.value = true;
  UserApi.login(signForm)
      .then((res) => {
        if (res.code === 200) {
          userStore.getInfo()
          cleanForm();
          console.log(res)
          localStorage.setItem("token", res.data)
          ElMessage({
            message: '登录成功',
            type: 'success'
          })
        } else {
          ElMessage({
            message: '登录失败',
            type: 'error'
          })
        }
      })
      .catch((res) => {
        console.log(res)
      }).finally(() => {
        loginLoading.value = false;
      })

}

const handleRegister = () => {
  loginLoading.value = true;
  UserApi.register(signForm)
      .then((res) => {
        if (res.code === 200) {
          ElMessage({
            message: '注册成功',
            type: 'success'
          })
          cleanForm();
        } else {
          ElMessage({
            message: res.message,
            type: 'warning'
          })
        }
      })
      .catch((res) => {
        console.log(res)
      })
      .finally(() => {
        loginLoading.value = false;
      })

}

const handleConfirm = () => {
  if (! verifyForm()) return;
  if (registerModel.value) {
    handleRegister();
  } else {
    handleLogin();
  }
}

</script>

<template>
  <el-dialog v-if="! userStore.isLogin"
    v-model="userStore.modalVisible"
    style="border-radius: 20px"
    width="400"
    @close="cleanForm"
  >
    <div 
      v-loading="loading"
    >
      <img class="mx-auto h-12" src="../assets/image/logo.png"  alt="logo"/>
      <div class="flex-col flex space-y-5 mt-5 p-3">
        <el-input
            size="large"
            placeholder="请输入用户名"
            v-model="signForm.username"
        >
          <template #prefix>
            <el-icon><UserFilled /></el-icon>
          </template>
        </el-input>
        <el-input
            size="large"
            placeholder="请输入密码"
            v-model="signForm.password"
            type="password"
            show-password
        >
          <template #prefix>
            <el-icon><Lock /></el-icon>
          </template>
        </el-input>

        <el-input
            v-if="registerModel"
            size="large"
            placeholder="请确认密码"
            v-model="signForm.confirmPassword"
            type="password"
            show-password
        >
          <template #prefix>
            <el-icon><Lock /></el-icon>
          </template>
        </el-input>

        <button class="bg-red-600 h-10 rounded-md text-white font-bold hover:opacity-75 transition duration-300 ease-in-out" @click="handleConfirm" >

          <span v-if="!loginLoading">{{ registerModel ? "注册" : "登录" }}</span>
          <span v-else>等待中...</span>
        </button>

        <span class="text-center">
          {{ registerModel ? "还没有账号":"已有账号" }} ?
          <a class="cursor-pointer text-red-600" @click="handleModelSwitch">
            {{ registerModel ? "立即登录":"立即注册" }}
          </a>
        </span>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped>
.el-input {
    --el-input-focus-border-color: rgb(239 68 68) !important;
}
</style>
